<template>
    <div class="my_content colorFFF flex flex-col h-full">
        <div class="colorFFF flex flex-col h-full">
            <Tabs class="flex-none" title="人流量">
                <template #btn>
                    <div style="width: 10rem"></div>
                </template>
            </Tabs>
            <!-- <div class="topPage flex-1 flex flex-col items-stretch"> -->
            <div class="topPage">
                <div id="echarts_screen"></div>
                <div class="bottomBox flex-none">
                    <div class="imgNumDiv">
                        <img src="../assets/booking_visitors.png" />
                        <div class="rightNum">
                            <label class="title">预约访客人数</label>
                            <div><label class="num">{{ response.appointCount }}</label><small>人</small></div>
                        </div>
                    </div>
                    <div class="imgNumDiv">
                        <img src="../assets/visitors_ arrived.png" />
                        <div class="rightNum">
                            <label class="title">已抵达访客人数</label>
                            <div><label class="num">{{ response.arrivedCount }}</label><small>人</small></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
import * as echarts from 'echarts';
import Tabs from "./Tabs.vue"
import { visitorStatistics, visitorNum } from "src/api/screenDevice";
import { debounce } from 'lodash';
export default {
    name: "RightVisitorsFlowRate",
    components: { Tabs },
    inject: ['villageId'],
    data() {
        return {
            response: {
                appointCount: 0,
                arrivedCount: 0,
            },
            options: {
                xLabel: ['5-12', '5-13', '5-14', '5-15', '5-16'],       // x轴，日期
                yData: [0, 0, 0, 0, 0],                      // y轴，人流量
            }
        }
    },
    mounted() {
        this.initEcharts();
        this.setIntervalTotalFn()
    },
    destroyed() {
        clearInterval(this.timer);
        this.timer = null;
        this.myCharts && this.myCharts.dispose()
    },
    methods: {
        setIntervalTotalFn() {
            const villageId = this.villageId
            if (villageId) {
                this.timer = null;
                this.timer = setInterval(() => {
                    this.visitorStatistics(villageId);
                    this.visitorNum(villageId);
                }, 20000);
            }
        },
        visitorStatistics(villageId) {
            // return
            visitorStatistics({ villageId: villageId }).then(res => {
                if (res.success == true) {
                    this.options.xLabel = res.data.date || []
                    this.options.yData = res.data.count || []
                    this.updateEcharts()
                }
            })
        },
        visitorNum(villageId) {
            // return
            visitorNum({ villageId: villageId }).then(res => {
                if (res.success == true) {
                    this.response.appointCount = res.data.appointCount
                    this.response.arrivedCount = res.data.arrivedCount
                    this.updateEcharts()
                }
            })
        },
        // 初始化echarts
        initEcharts() {
            this.myCharts && this.myCharts.dispose()
            let myCharts = echarts.init(document.getElementById('echarts_screen'));
            visitorStatistics({ villageId: this.villageId }).then(res => {
                if (res.success == true) {
                    this.options.xLabel = res.data.date || []
                    this.options.yData = res.data.count || []
                }
                var option = {
                    legend: {
                        show: false,
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        top: '0',
                        left: '1%',
                        right: '2%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: this.options['xLabel'],
                            axisLabel: {
                                interval: 3,
                                textStyle: {
                                    color: '#6E6E6D',
                                    fontSize: 10
                                }
                            },
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    type: "solid",
                                    color: '#504834',
                                    width: '1' //坐标线的宽度
                                }
                            },
                            axisTick: {
                                show: false,
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            splitNumber: 5,
                            axisLabel: {
                                formatter: '{value}',
                                textStyle: {
                                    color: '#6E6E6D',
                                    fontSize: 10 //坐标值得具体的颜色
                                }
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: '#332B1B', //网格横线颜色
                                    width: 1,
                                    type: 'solid'
                                }
                            },
                            axisLine: {
                                show: false,
                                lineStyle: {
                                    type: 'solid',
                                    color: '#F0F0F0',
                                    width: '1' //坐标线的宽度
                                }
                            }
                        }
                    ],
                    series: [
                        {
                            name: '人流量',
                            type: 'bar',
                            barWidth: 5,
                            emphasis: {
                                focus: 'series'
                            },
                            itemStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(
                                        0, 0, 0, 1,
                                        [
                                            { offset: 0, color: '#F4CF88' },                   //柱图渐变色
                                            { offset: 0.5, color: '#AA8F5A' },                 //柱图渐变色
                                            { offset: 1, color: '#6D5B39' },                   //柱图渐变色
                                        ]
                                    )
                                }
                            },
                            data: this.options['yData'],
                        }
                    ],
                    grid: {
                        show: false,
                        top: '20%',
                        bottom: '15%',
                    }
                };
                myCharts.setOption(option);
                const f = debounce(function () {
                    if (myCharts.isDisposed()) {
                        window.removeEventListener('resize', f)
                    } else {
                        myCharts.resize();
                    }
                }, 500)
                window.addEventListener('resize', f)
                this.myCharts = myCharts
            })

        },
        updateEcharts() {
            this.charts_options = {
                series: [
                    { data: this.options['yData'], }
                ],
                xAxis: { data: this.options['xLabel'], }
            }
        }
    }
}
</script>

<style scoped lang="scss">
.my_content {
    width: 100%;
    height: 100%;
    background: #292928;

    .topPage {
        width: 100%;
        height: 90%;
        display: flex;
        flex-direction: column;
        margin-bottom: 1rem;

        #echarts_screen {
            height: 100%;
            flex: 3;
        }

        .bottomBox {
            display: flex;
            justify-content: space-between;
            flex: 1;

            .imgNumDiv {
                height: 3.75rem;
                display: flex;
                align-items: center;

                img {
                    width: 4.125rem;
                    margin-right: 0.625rem;
                }

                .rightNum {
                    display: flex;
                    flex-flow: column;
                    justify-content: center;
                }

                .title {
                    color: #FBE5BB;
                    font-size: 0.75rem;
                    margin-bottom: 0.315rem;

                }

                .num {
                    color: #FBE5BB;
                    font-size: 1.5rem;
                    letter-spacing: 0.0625rem;
                    text-shadow: 0px 0px 6px rgba(255, 255, 255, 0.4);
                }

                small {
                    color: #AE9F85;
                    font-size: 0.625rem;
                    margin-left: 0.3125rem;
                }
            }
        }
    }
}

// :deep .item7 .topPage #echarts_screen{
//     flex: 0 1 0% !important;
// }
</style>